<template>
	<view class="dispose uni-common-mt">
		<view class="form form-a">
			<view class="form-group">
				<view class="form-item">
					<view class="form-item-header">指挥信息：</view>
					<view class="form-item-body">
						<view class="form-control-static"></view>
					</view>
				</view>
				<view class="form-item">
					<view class="form-item-header">当前位置：</view>
					<view class="form-item-body">
						<view class="card card-address">
							<textarea v-model="eventAddress" class="card-content" placeholder="请输入或选择定位获取位置信息">
							</textarea>
							<view class="card-icon" @tap="openMap">
								<image class="icon" src="@/static/icon/iv_location.png"></image>
							</view>
						</view>
					</view>
				</view>
				
				<view class="form-item form-item-hor">
					<view class="form-item-header">压缩图片：</view>
					<view class="form-item-body">
						<view class="switch">
							<switch :checked="isCompressed" @change="switchChange"/>
						</view>
					</view>
				</view>
				
				<view class="form-item">
					<view class="form-item-header">处理后照片：</view>
					<view class="form-item-body">
						<view class="list">
							<view class="list-group">
								<view class="list-item" v-for="(baseImage, index) in baseImages" :key="index">
									<view class="card card-a" @tap="viewPic(index)">
										<view class="card-header">
										</view>
										<view class="delete" @tap.stop="delPic(index)">
											<image class="icon" mode="aspectFit" src="@/static/icon/delete-icon.png"></image>
										</view>
										<view class="card-body">
											<image class="icon" mode="aspectFit" :src="baseImage"></image>
										</view>
									</view>
								</view>
								<view class="list-item">
									<view class="card card-a upload" @click="getPic">
										<view class="card-body">
											<image class="icon" src="@/static/icon/iv_pic_add.png"></image>
										</view>
									</view>
								</view>
							</view>

						</view>
					</view>
				</view>
				
				<view class="form-item-tip">
					*请在拍照时，确保事件与环境的位置关系与拍摄全景，如一张照片无法完全表现时，可拍摄多张！
				</view>
				
				<view class="form-item ">
					<view class="form-item-header">{{ eventDealStatusName }}反馈：</view>
					<view class="form-item-body">
						<textarea class="form-control" v-model="remark"></textarea>
					</view>
				</view>
				
				<view class="form-item" v-if="roleKey == 'czry' &&(eventSrcType == 11 || eventSrcType == 16) && type == 1">
					<view class="form-item-header">审核领导：</view>
					<view class="form-item-body">
						<textarea class="form-control" v-model="auditLeader"></textarea>
					</view>
				</view>
			</view>
		</view>

		<view class="btns">
			<view class="btns-group">
				<button class="btn btn-a" @tap="sendDealData">立即处理</button>
			</view>
		</view>
	</view>
</template>

<script>
	import { eventDeal } from '@/api/configure.js';
	import { chooseImage,deepClone ,mergeUrls, getUserInfo ,getBaseImages, getRoutes, previewImage} from '@/util/util.js';
	import configUrl from '@/util/url.js';

	export default {
		data() {
			return {
				type: '',
				title: '',
				types: [{
					type: 1,
					title: '',
				}, {
					type: 2,
					title: '回退'
				}],
				gdx: '',
				gdy: '',
				remark: '',
				auditLeader: '',
				eventAddress: '',
				eventAddress_bk: '',
				eventSrcType: '',
				latitude: '',
				longitude: '',
				eventId: '',
				createUser: '',
				eventDealStatus: '',
				eventDealStatusName: '',
				eventStatus: '',
				userInfo: {},
				roleKey: '',
				images: [],
				baseImages: [],
				isCompressed: true
			}
		},
		methods: {
			init() {
				this.userInfo = getUserInfo();
				
				this.roleKey = this.userInfo.roleKey;
			},
			render() {
				let type = this.type

				this.title = type == 1 ? this.eventDealStatusName : '回退'

				uni.setNavigationBarTitle({
					title: `案件${this.title}`
				});
			},
			async getPic() {
				let res = await chooseImage({}, this.isCompressed).catch((err) => {});;
				
				if(res) {
					let tempFilePaths = res.tempFilePaths.slice(0);
					
					this.images = this.images.concat(tempFilePaths);
					
					let baseImages = await getBaseImages(tempFilePaths);
					
					this.baseImages = this.baseImages.concat(baseImages);
				}
				
			},
			delPic(index) {
				this.images.splice(index, 1);
				this.baseImages.splice(index, 1);
			},
			viewPic(index) {
				previewImage({
					urls: this.images,
					current: index
				})
			},
			openMap() {
				let params = {
					gdx: this.gdx,
					gdy: this.gdy,
					type: "GET"
				}
				
				if ( this.type == 2 ) {
					params.type = "MOVE"
				}

				let url = mergeUrls('/pages/map/index', params);

				uni.navigateTo({
					url: url
				});
			},
			switchChange(e) {
				this.isCompressed = e.detail.value;
			},
			getLocationData({
				latitude,
				longitude,
				address
			}) {
				this.latitude = latitude;
				this.longitude = longitude;
				
				if(address){
					if(typeof address == 'string') {
						this.eventAddress = address;
					} else {
						let {
							country,
							province,
							city,
							district,
							street,
							streetNum,
							poiName
						} = address;
						
						this.eventAddress = `${country}${province}${city}${district}${street}${streetNum}${poiName}`;
					}
				} else {
					this.eventAddress = this.eventAddress_bk;
				}
			},
			sendDealData() {
				if(!this.eventStatus) {
					uni.showToast({
					    title: '该案件状态码异常',
					    duration: 2000,
						icon: 'none'
					});
				}
				
				if(this.eventStatus == '4') {
					uni.showToast({
					    title: '该案件已结案',
					    duration: 2000,
						icon: 'none'
					});
				}
				
				if(!this.latitude){
					uni.showToast({
					    title: '请选择定位获取位置信息',
					    duration: 2000,
						icon: 'none'
					});
					
					return 
				}
				
				if(!this.eventAddress){
					uni.showToast({
					    title: '请输入位置信息',
					    duration: 2000,
						icon: 'none'
					});
					
					return 
				}
				
				if(this.baseImages.length == 0 && this.type == 1){
					uni.showToast({
					    title: '请上传照片',
					    duration: 2000,
						icon: 'none'
					});
					
					return 
				}
				
				if(!this.remark){
					uni.showToast({
					    title: `${this.eventDealStatusName}反馈不能为空`,
					    duration: 2000,
						icon: 'none'
					});
					
					return 
				}
				
				let images = this.baseImages.map( ( image )=> {
					let ret = {
						'image': image.split(',')[1]
					}
					
					return ret;
				} )
				
				let data = {
					remark: this.remark,
					eventAddress: this.eventAddress,
					eventId: this.eventId,
					createUser: this.userInfo.userId,
					eventDealStatus: this.eventDealStatus,
					eventReportName: this.userInfo.userName,
					isBack: this.type == 1 ? 0 : 1,
					images: JSON.stringify(images),
					auditLeader: this.auditLeader || ''
				}
				
				eventDeal(data).then((res) => {
					uni.showToast({
					    title: res.msg,
					    duration: 2000,
						icon: 'none'
					});
					
					uni.$emit('case.case.refresh');
					uni.$emit('flow.flow.refresh');
					
					let routes = getRoutes();
					
					if (routes.includes('pages/flow/record')) {
						uni.$emit('flow.record.refresh');
					} 
					
					if (routes.includes('pages/flow/task')) {
						uni.$emit('flow.task.refresh');
					}
					
					setTimeout(()=> {
						uni.navigateBack({
						    delta: 1
						});
					}, 2000);
				})
			},
			back() {  
			    uni.navigateBack({  
			        delta: 1
			    });  
			}  
		},
		onLoad(option) {
			this.eventDealStatusName = option.eventDealStatusName;
			this.eventDealStatus = option.eventDealStatus;
			this.type = option.type;
			this.gdx = option.gdx;
			this.gdy = option.gdy;
			this.eventId = option.eventId;
			this.eventAddress_bk = option.eventAddress
			this.eventSrcType = option.eventSrcType;
			this.eventStatus = option.eventStatus;
			
			this.init();

			uni.$on('receiveLocationData', this.getLocationData);
		},
		onUnload() {
			uni.$off('receiveLocationData');
		},
		onReady() {
			this.render();
		},
		onBackPress(options) {
			let _this = this;
			
			if (options.from === 'navigateBack') {  
				return false;  
			}  
			
			uni.showModal({
			    content: '确定退出当前页面吗？',
			    success: function (res) {
			        if (res.confirm) {
			           _this.back();  
			        } else if (res.cancel) {
			          
			        }
			    }
			});
					   
			return true;  
		}
	}
</script>

<style lang="scss">
	.list {
		.list-group {
			display: flex;
			flex-wrap: wrap;
			.list-item {
				margin-bottom: 20rpx;
				width: 33.33%;
			}
		}
	}

	.card-a {
		width: 223rpx;
		margin: 0rpx auto;
		border-radius: 5rpx;
		border: 1rpx solid #a2a2a2;
		position: relative;
		top: 0rpx;
		left: 0rpx;

		.card-body {
			height: 143rpx;

			.icon {
				width: 100%;
				height: 100%;
			}
		}

		&.upload {
			border: none;
		}

		.card-header {
			width: 100%;
			height: 31rpx;
			position: absolute;
			top: 0rpx;
			left: 0rpx;
			background-color: #000000;
			opacity: 0.3;
			z-index: 2;
		}

		.delete {
			width: 31rpx;
			height: 31rpx;
			position: absolute;
			top: 0rpx;
			right: 0rpx;
			z-index: 3;
			display: flex;
			justify-content: center;
			align-items: center;

			.icon {
				width: 20rpx;
				height: 20rpx;
			}
		}

	}

	.form {}

	.form-a {
		.form-group {
			.form-item {
				margin-bottom: 20rpx;

				.form-item-header {
					
					padding: 8rpx 0rpx 8rpx 30rpx;
					font-size: 28rpx;
					line-height: 120%;
					color: #767676;
				}

				.form-item-body {
					padding: 0rpx 30rpx;

					.form-control-static {
						min-height: 200rpx;
						padding: 20rpx;
						font-size: 24rpx;
						border-radius: 10rpx;
						line-height: 120%;
						background-color: #ececec;
						box-sizing: border-box;
					}

					.form-control {
						width: 100%;
						height: 200rpx;
						padding: 20rpx;
						font-size: 24rpx;
						border-radius: 10rpx;
						line-height: 120%;
						box-sizing: border-box;
						border: 1px solid #c4c4c4;
					}
				}
				
				&.form-item-hor {
					display: flex;
				
					.form-item-header {
						width: 180rpx;
						box-sizing: border-box;
						margin-bottom: 0rpx;
					}
				
					.form-item-body {
						padding: 0rpx 30rpx 0rpx 0rpx;
						width: calc(100% - 180rpx);
						box-sizing: border-box;
					}
				}
			}
			.form-item-tip{
				padding: 8rpx 30rpx;
				font-size: 28rpx;
				line-height: 120%;
				color: #d81e06;
			}
		}
	}

	.btns {
		background-color: #ffffff;

		.btns-group {
			padding: 17rpx 30rpx;
			display: flex;

			.btns-item {
				width: 50%;
				padding: 0rpx 10rpx;
			}
		}

	}

	.btn {
		width: 100%;
		padding: 20rpx 0px;
		font-size: 24rpx;
		line-height: 120%;
		color: #fff;
		text-align: center;
		border: none;
		border-radius: 6rpx;
		background: none;

		&:after {
			display: none;
		}

		&.btn-a {
			background-color: #f29004;
		}
	}

	.card {}

	.card-address {
		position: relative;
		top: 0rpx;
		left: 0rpx;

		.card-content {
			width: auto;
			height: 120rpx;
			margin: 0rpx 100rpx 0rpx 0rpx;
			padding: 20rpx;
			font-size: 24rpx;
			border-radius: 10rpx;
			line-height: 120%;
			box-sizing: border-box;
			border: 1px solid #c4c4c4;
		}

		.card-icon {
			width: 80rpx;
			height: 80rpx;
			position: absolute;
			top: 0rpx;
			right: 0rpx;
			z-index: 10;
			margin: 20rpx 0rpx 20rpx 10rpx;

			.icon {
				width: 100%;
				height: 100%;
			}
		}
	}
	
	.switch{
		height: 57rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-end;
	}
	
	/deep/ .uni-switch-input{
		height: 22px;
		&:after{
			height: 20px;
		}
		&:before{
			height: 20px;
		}
	}
</style>
